<template>
  <div id="container">
    <div class="content with-diagram" id="js-drop-zone">
      <div class="canvas" id="js-canvas"></div>
      <div class="properties-panel-parent" id="js-properties-panel"></div>
    </div>

    <ul class="buttons">
      <li>
        <button type="primary" size="medium" @click="downloadBpmn">
          导出BPMN
        </button>
      </li>
      <li>
        <button type="success" size="medium" @click="downloadSvg">
          下载 SVG图
        </button>
      </li>
      <li>
        <button type="warning" size="medium" @click="readyDeploy">
          直接部署
        </button>
      </li>
    </ul>
    <a id="download"></a>
  </div>
</template>

<script>
import $ from "jquery";
import BpmnModeler from "bpmn-js/lib/Modeler";
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "@/assets/bpmnlib/properties-panel/provider/activiti";
import activitiModdleDescriptor from "@/assets/bpmnlib/activiti.json";
import customTranslate from "@/assets/bpmnlib/customTranslate/customTranslate";
import customControlsModule from "@/assets/bpmnlib/customControls";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "@/assets/bpmnlib/bpmn-app.css";
var container = null;
var canvas = null;
var bpmnModeler = null;
export default {
  name: "Dashboard",
  data() {
    return {
      diagramXML: null,
      bpmnViewer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      container = $("#js-drop-zone");
      canvas = $("#js-canvas");
      var diagramXML =
        '<?xml version="1.0" encoding="UTF-8"?>' +
        ' <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">' +
        '    <bpmn2:process id="process" isExecutable="true">' +
        '      <bpmn2:startEvent id="StartEvent_1"/>' +
        "    </bpmn2:process>" +
        '    <bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
        '      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
        '        <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
        '          <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>' +
        "        </bpmndi:BPMNShape>" +
        "      </bpmndi:BPMNPlane>" +
        "    </bpmndi:BPMNDiagram>" +
        "  </bpmn2:definitions>";
      // 添加翻译组件
      var customTranslateModule = {
        translate: ["value", customTranslate],
      };
      bpmnModeler = new BpmnModeler({
        container: canvas,
        propertiesPanel: {
          parent: "#js-properties-panel",
        },
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule,
          customControlsModule,
          customTranslateModule,
        ],
        moddleExtensions: {
          activiti: activitiModdleDescriptor,
        },
      });
      container.removeClass("with-diagram");
      this.openDiagram(diagramXML);
    });
  },
  methods: {
    openDiagram: async (xml) => {
      try {
        await bpmnModeler.importXML(xml);
        container.removeClass("with-error").addClass("with-diagram");
      } catch (err) {
        container.removeClass("with-diagram").addClass("with-error");
        container.find(".error pre").text(err.message);
        console.error(err);
      }
    },
    downloadBpmn: async () => {
      const { xml } = await bpmnModeler.saveXML({ format: true });
      if (xml) {
        var encodedData = encodeURIComponent(xml);
        var link = document.createElement("a");
        link.setAttribute("download", "diagram.bpmn");
        link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
        link.click();
      } else {
        console.log("xml is null");
      }
    },
    downloadSvg: async () => {
      const { svg } = await bpmnModeler.saveSVG();
      if (svg) {
        var encodedData = encodeURIComponent(svg);
        var link = document.createElement("a");
        link.setAttribute("download", "diagram.svg");
        link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
        link.click();
      } else {
        console.log("xml is null");
      }
    },
    readyDeploy() {
      // this.$prompt("请输入流程名称", "准备部署", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      // })
      //   .then(({ value }) => {
      //     this.$message({
      //       type: "success",
      //       message: "正在部署中...",
      //     });
      //       this.deploy(value)
      //   })
      //   .catch(() => {
      //   });
    },
    async deploy(name) {
      //  const { xml } = await bpmnModeler.saveXML({ format: true });
      //  this.$api.postBPMNAndDeployment(xml,name).then(res=>{
      //      if (res.status == 0) {
      //           this.$notify({
      //             title: '成功',
      //             message: '流程部署成功',
      //             type: 'success'
      //             });
      //      }
      //  })
    },
  },
};
</script>

<style >
#container {
  width: 100%;
  height: 100%;
}
</style>
